<template>
  <a-avatar size="large" :style="{ backgroundColor: randomColor(), verticalAlign: 'middle' }">
    {{ name }}
  </a-avatar>
</template>
<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  val: {
    type: String,
    default: '',
  },
})

const name = computed(() => {
  if (props.val) {
    return props.val.split('')[0]
  } else {
    return ''
  }
})

// 生成随机颜色
const randomColor = () => {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}
</script>
